<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 动画 - @keyframes</title>
  <style>
    body {
      padding: 0 40px;
    }
    
    /* 
      产生动画的前提是必须要有动画帧（一张张相近的图）
      通过不断的切换动画帧而产了动画的效果
    */

    /* 学习 CSS 中的动画，首要的是掌握如何定义动画帧 */

    /* 语法格式 */
    /* @keyframes 名字 {
      动画帧

      动画帧

      动画帧

      动画帧

      动画帧

      动画帧
    } */

    /* 1. 声明 */
    @keyframes move {
      10% {
        width: 200px;
        height: 300px;
      }

      50% {
        width: 210px;
        height: 300px;

        background-color: green;
      }

      75% {
        width: 240px;
      }

      100% {
        width: 300px;
      }
    }

    /* 2. 应用 */
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;

      /*  */
      animation: move 2s;
    }
  </style>
</head>
<body>
  <h3>@keyframes</h3>
  <p>@keyframes 是 CSS 中提供的专门用于定义动画关键帧的语法词。</p>

  <div class="box"></div>
</body>
</html>